<template>
    <div class="wrapper">
        <HeaderNav title="开店设置">
        </HeaderNav>
        <div class="uploadImage">
            <UploadImage :onFileChange="onFileChange"></UploadImage>
        </div>
        <div class="fields">
            <div class="formItem">
                <div class="formItemTitle">店面名字
                    <small> (名字确定后不可修改)</small>
                </div>
                <div class="input">
                    <input type="text" v-model="shop.name"/>
                </div>
            </div>
            <div class="formItem">
                <div class="formItemTitle"> 网站：
                </div>
                <div class="input">
                    <span>http://m.diyeetech.com/shop/</span><span>{{shop.name}}</span>
                </div>
            </div>
            <div class="formItem">
                <div class="formItemTitle">描述</div>
                <div class="input textarea">
                    <textarea name="" id="" cols="30" rows="10"
                              v-model="shop.desc"
                    ></textarea>
                </div>
            </div>
        </div>
        <div class="subbtn" @click="addShop">
            提交
        </div>
    </div>
</template>
<script>
    import HeaderNav from '../../components/HeaderNav'
    import UploadImage from './uploadImage'
    import {addShop} from "./service";
    import MyAlert from "../../utils/myalert";
    import {getLocal} from "../../utils/local";
    import {getCookie} from "../../utils/cookie";

    export default {
        components: {
            HeaderNav, UploadImage
        },
        data() {
            return {
                shop: {
                    userId: "",
                    imageId: "",
                    image: {
                        objectId: "",
                        url: "",
                        filename: "",
                    },
                    name: "",
                    shopUrl: "",
                    desc: "",
                }
            }
        },
        mounted() {
            /*用户已经开店，立刻跳转到设置*/
            var a = getCookie("app.login_user")
            if (a.defaultShop) {
                this.$router.replace({path: "/setting-shop"})
            }
        },
        methods: {
            onFileChange(file) {
                this.$data.shop.image = {objectId: file.id, url: file.url(), filename: file.name()}
            },
            addShop() {
                var self = this
                if (!this.$data.shop.image.objectId) {
                    MyAlert.fail("没有上传店面封面")
                    return false
                }
                if (!this.$data.shop.name) {
                    MyAlert.fail("shop name  不能为空")
                    return false
                }
                if (this.$data.shop.desc) {

                    if (this.$data.shop.desc.length <= 20 || 100 <= this.$data.shop.desc.length) {
                        MyAlert.fail("  描述不能小于20或大于250")
                        return false
                    }
                }
                MyAlert.loading()
                addShop(this.$data.shop).then(res => {
                    MyAlert.clear()
                    MyAlert.success("开店成功")
                    setTimeout(() => {
                        self.$router.push("/myself")
                    }, 1000)
                }).catch(e => {
                    MyAlert.clear()
                    console.error(e)
                    MyAlert.fail(e.message)
                })
            }
        }
    }
</script>
<style lang="less" scoped>
    .wrapper {

        .fields {
            margin-top: 30px;
            .formItem {

                padding-left: px2rem(20);
                padding-right: px2rem(20);
                border-bottom: 1px solid #eee;
                .formItemTitle {
                    font-weight: 600;
                    color: #8e8e8e;
                    width: 100%;
                    margin-top: 5px;
                }
                .input {
                    display: flex;
                    align-items: center;
                    height: px2rem(80);
                    width: 100%;
                    input[type='text'] {
                        border: none;
                        height: px2rem(45);
                        width: 100%;
                        padding-left: 10px;
                    }
                    &.textarea {
                        height: auto;
                        textarea {
                            margin-top: 5px;
                            width: 100%;
                            background: rgba(238, 238, 238, 0.62);
                            border: none;
                            padding: 10px;
                        }
                    }
                }

                &:last-child {
                    border-bottom: none;
                }
            }
        }

        .subbtn {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 80%;
            height: .3rem;
            background: #ff4800;
            align-self: center;
            color: #fff;
            margin: auto;
            border-radius: 50px;
            margin-top: 20px;
        }
    }
</style>
